<template>
	<view class="content">
		<view class="newbg">
			<image class="js" src="../../static/pages_my/qdrzbg.png" mode=""></image>
			<view class="input-box" style="margin: 670rpx auto 0;">
				<input type="text" placeholder="请输入姓名" v-model="name" placeholder-class="ppp">
			</view>
			<view class="input-box" style="margin: 30rpx auto;">
				<input type="tel" placeholder="请输入手机号" v-model="mobile" placeholder-class="ppp">
			</view>
			<view class="input-box flex" @click="show=true">
				<text>申请渠道</text>
				<view class="flex" style="align-items: center;">
					<text>{{channel}}</text>
					<u-icon name='arrow-right' color='#00CE9B'></u-icon>
				</view>
			</view>
			<view class="input-box flex" @click="show1=true">
				<text>渠道城市</text>
				<view class="flex" style="align-items: center;">
					<text>{{city1}}</text>
					<u-icon name='arrow-right' color='#00CE9B'></u-icon>
				</view>
			</view>
			<view class="input-box">
				<textarea name="" id="" placeholder="请输入备注信息" v-model="note" cols="30" rows="10"></textarea>
			</view>
		</view>
		<view class="flex-cneter sub u-m-t-50" @click="apply" v-if="state === ''">
			<view class="mybtn">
				申请
			</view>
		</view>
		<view class="flex-cneter sub u-m-t-50" @click="apply" v-if="state === -1">
			<view class="mybtn">
				申请
			</view>
		</view>
		<u-picker :show="show" :columns="columns" keyName="name" @confirm='confirm' @cancel='show=false'></u-picker>
		<!-- <u-picker :show="show1" :columns="cityList" @confirm='confirmcity' @change='changeHandler' @cancel='show1=false'></u-picker> -->
		<u-picker :show="show1" :columns="citydata" keyName="city" @confirm="change"
			@cancel="show1 = false"></u-picker>
	</view>
</template>

<script>
	import cityData from '../../common/city.js'
	export default {
		data() {
			return {
				mobile:"",
				channel: '选择渠道',
				channel_id:'',
				city1: '选择城市',
				province :'',
				district:'',
				name:'',
				columns: [
					
				],
				citydata:[],
				cityList: [],
				cityLevel1: [],
				cityLevel2: [],
				cityLevel3: [],
				show: false,
				show1: false,
				state:'',
				note:''
			};
		},
		onLoad() {
			this.initCityData()
			this.getInfo()
			this.getCity()
		},
		methods:{
			getCity() {
				this.$api.post('/city').then((res) => {
					if (res.code === 1) {
						this.citydata = [res.data]
					}
				}).catch(() => {
			
				})
			},
			confirm(e) {
				this.show = false
				this.channel = e.value[0].name
				this.channel_id = e.value[0].id
			},
			initCityData() {
				// 遍历城市js
				cityData.forEach((item1, index1) => {
					let temp2 = [];
					this.cityLevel1.push(item1.provinceName);
			
					let temp4 = [];
					let temp3 = [];
					// 遍历市
					item1.cities.forEach((item2, index2) => {
						temp2.push(item2.cityName);
						// 遍历区
						item2.counties.forEach((item3, index3) => {
							temp3.push(item3.countyName);
						})
						temp4[index2] = temp3;
						temp3 = [];
					})
					this.cityLevel3[index1] = temp4;
			
					this.cityLevel2[index1] = temp2;
				})
				// 选择器默认城市
				this.cityList.push(this.cityLevel1, this.cityLevel2[0], this.cityLevel3[0][0]);
			},
			// 选中时执行
			changeHandler(e) {
				const {
					columnIndex,
					index,
					indexs,
					value,
					values,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e;
				if (columnIndex === 0) { // 选择第一列数据时
					// 设置第二列关联数据
					picker.setColumnValues(1, this.cityLevel2[index]);
					// 设置第三列关联数据
					picker.setColumnValues(2, this.cityLevel3[index][columnIndex]);
				} else if (columnIndex === 1) { // 选择第二列数据时
					// 设置第三列关联数据
					picker.setColumnValues(2, this.cityLevel3[indexs[0]][index]);
				}
			},
			// 单击确认按钮时执行
			confirmcity(e) {
				// 输出数组 [省, 市, 区]
				
				if(e.value[1]=='市辖区'){
					this.city1 = e.value[0]
				}else{
					this.city1 = e.value[1]
				}
				this.province = e.value[0]
				this.district = e.value[2]
				// 隐藏城市选择器
				this.show1 = false;
			},
			change(e){
				console.log(e);
				this.city1 = e.value[0].city
				this.show1 = false;
			},
			apply(){
				if(this.name === ''){
					this.$toast('请输入姓名');
					return
				}
				if(!uni.$u.test.mobile(this.mobile)){
					this.$toast('请输入正确的手机号');
					return
				}
				if(this.channel_id === ''){
					this.$toast('请选择推广渠道');
					return
				}
				if(this.city === ''){
					this.$toast('请选择推广城市');
					return
				}
				this.$api.post('/channel',{
					type: 'apply',
					channel_id: this.channel_id,
					name: this.name,
					mobile: this.mobile,
					city: this.city1,
					note: this.note
				}).then(res => {
					if (res.code == 1) {
						this.$toast(res.msg)
						setTimeout(()=>{
							this.$back();
						},1000)
					}
				}).catch((res) => {
				
				})
			},
			getInfo(){
				this.$api.post('/channel').then(res => {
					if (res.code == 1) {
						this.columns.push(res.data.list)
						if(res.data.apply && res.data.apply.state === 0){
							this.$toast('正在审核中')
						}
						if(res.data.apply){
							this.state = res.data.apply.state
							this.channel = res.data.apply.channel_name
							this.channel_id = res.data.apply.channel_id
							this.city = res.data.apply.city
							this.name = res.data.apply.name
							this.mobile = res.data.apply.mobile
							this.note = res.data.apply.note
						}
						
						
					}
				}).catch((res) => {
				
				})
			}
		}
	}
</script>

<style lang="scss">
page{
	position: relative;
	background-color: #68FFB8;
	padding-bottom: 100rpx;
	height: calc(100vh - var(--window-bottom) - var(--window-top));
	padding-top: var(--status-bar-height);
}
.content{
		padding-bottom: 100rpx;
	}
.newbg{
	width: 90vw;
	margin: 0 auto;
	background-color: #68FFB8;
	box-sizing: border-box;
	position: relative;
	overflow: auto;
	.js{
		width: 90vw;
		height: 100%;
		position: absolute;
		z-index: 1;
	}
	.input-box {
		z-index: 999;
		position: relative;
		margin: 30rpx auto;
		justify-content: space-between;
		width: 75%;
		padding: 30rpx;
		border-radius: 30rpx;
		border: 2rpx solid #00CE9B;
		color: #00CE9B;
		.ppp {
			color: #00CE9B;
		}
	}
}
.sub{
	image{
		width: 90vw;
		height: 110rpx;
	}
	margin-bottom: 50rpx;
}
</style>
